<template>
    <div>
        <div v-if="currentPanel == 'list'">
            <el-card class="box-card">
                <el-form size="small" :inline="true" :model="queryData" class="demo-form-inline" label-width="100px">
                    <el-form-item>
                        <el-input v-model="queryData.name" placeholder="线下活动名称"></el-input>
                    </el-form-item>
<!--                    <el-form-item>
                        <el-select v-model="queryData.activityInstanceStatus" placeholder="线下活动状态">
                        </el-select>
                    </el-form-item>-->
                    <el-form-item>
                        <el-date-picker
                                v-model="queryData.data"
                                type="daterange"
                                range-separator="至"
                                start-placeholder="开始时间"
                                value-format=“yyyy-MM-dd”
                                end-placeholder="结束时间">
                        </el-date-picker>
                    </el-form-item>
<!--                    <el-form-item>
                            <el-cascader :props="queryData.selectAddress" v-model="queryData.city" placeholder="请选择城市"></el-cascader>
                    </el-form-item>-->
                    <el-form-item>
                        <el-select v-model="queryData.empId" placeholder="请选择员工">
                            <el-option
                                    v-for="item in emp"
                                    :key="item.empId"
                                    :label="item.empName"
                                    :value="item.empId" />
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button size="small" type="primary" @click="queryDataHandle(pagePagination.currentPage,pagePagination.pageSize)">查询</el-button>
                        <el-button size="small" @click="resetQuery">重置</el-button>
                    </el-form-item>
                </el-form>

            </el-card>
            <div class="interspaceH"></div>
            <div>
                <div>
                    <el-card class="box-card">
                        <!--新建线下活动-->
                        <el-button type="primary" @click="currentHandler('listAdd')">+ 新建线下活动</el-button>
                        <el-button @click="download">导出</el-button>
                        <div class="interspaceH"></div>
<!--                        <el-table
                                :data="tableData"
                                style="width: 100%">-->
                        <el-table @selection-change="tableRowChange" :data="tableData"
                                  :header-cell-style="{background:'#F3F4F7',color:'#555'}" style="width: 100%">
                            <el-table-column
                                    prop="name"
                                    label="线下活动名称"
                                    width="180">
                            </el-table-column>
                            <el-table-column
                                    prop="city"
                                    label="线下活动城市"
                                    width="180">
                            </el-table-column>
                            <el-table-column
                                    prop="activityInstanceStatus"
                                    label="线下活动状态">
<!--                                <template slot-scope="scope">
                                    <el-tag>{{scope.row.activityInstanceStatus}}</el-tag>
                                </template>-->
                            </el-table-column>
                            <el-table-column
                                    prop="date"
                                    label="线下活动时间">
                            </el-table-column>
                            <el-table-column
                                    prop="createTime"
                                    label="线下活动创建时间">
                            </el-table-column>
                            <el-table-column
                                    prop="empName"
                                    label="线下活动负责人">
                            </el-table-column>
                            <el-table-column
                                    label="操作">
                                <template slot-scope="scope">
<!--                                    <el-button type="text" size="small">报名链接</el-button>-->
<!--                                    <el-button type="text" size="small">签到链接</el-button>-->
                                    <el-button type="text" @click="tui(scope.row)">推广</el-button>
<!--                                    <el-button type="text" size="small" @click="currentHandler('listStatisti')">统计</el-button>-->
                                    <el-button type="text" size="small" @click="publish(scope.row)">发布</el-button>
<!--                                    <el-button type="text" size="small">更多</el-button>-->
                                </template>
                            </el-table-column>
                        </el-table>
                        <el-pagination @size-change="queryDataHandle(pagePagination.currentPage,$event)"
                                       @current-change="queryDataHandle($event,pagePagination.pageSize)"
                                       :current-page="pagePagination.currentPage"
                                       :page-sizes="pagePagination.pageSizes" :page-size="pagePagination.pageSize"
                                       layout="total, sizes, prev, pager, next"
                                       :total="pagePagination.total">
                        </el-pagination>
                    </el-card>
                </div>
            </div>
            <el-dialog title="推广" :visible.sync="tuiguang" width="30%" :close-on-click-modal="false">
                <el-form ref="form" :model="table" label-width="90px">
                    <el-form-item>
                        <el-button size="small" class="title" @click="xiazai(table.activityDimensional)">下载二维码</el-button>
                        <el-button size="small" @click="fuzhi(table.activityDrawURL)">复制链接</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>
        </div>
        <div v-if="currentPanel == 'listAdd'">
            <listAdd @currentHandler=currentHandler></listAdd>
        </div>
      <div v-if="currentPanel == 'listStatisti'">
        <listStatisti @currentHandler=currentHandler></listStatisti>
      </div>
    </div>
</template>

<script>
import listAdd from '@/views/masket/offline/list_add'

import Pagination from "@/components/Pagination"
import listStatisti from "@/views/masket/offline/listStatisti"
import axios from "axios";
export default {
    components: {
        listAdd,
        listStatisti,
        Pagination
    },
    data() {
        return {
            emp: [],
            tuiguang: false,
            table: {},
            currentPanel: 'list',
            queryData: {
                name: '',
                status: '',
                data: [],
                city: '',
                empId: ''
            },
            tableData: [],
            formInline: {
                page: 1,
                limit: 10,
                varLable: '',
                varName: '',
                token: localStorage.getItem('logintoken')
            },
            pagePagination: {
                currentPage: 1,
                pageSizes: [10, 15, 20, 25],
                pageSize: 10,
                total: 0
            },
        }
    },
    mounted() {
        this.queryDataHandle(1,10)
        let that = this;
        var query = that.$router.currentRoute.query;
        let orgId = query.orgId
        this.$request('/api/agentCompany/queryAuthentication/1_0?orgId=' + orgId, '', 'GET').then((data) => {
            that.queryData = {...that.queryData, ...data.data}
            that.queryData['selectAddress'] = {
                checkStrictly: true,
                lazy: true,
                lazyLoad(node, resolve) {
                    const {level} = node;
                    let params = {};
                    if (level === 0) {
                        params.parentCode = '100000'
                    } else {
                        params.parentCode = node.value
                    }
                    axios.get('http://cos.tpchain.net:9300/api/area/getAreaByParams', {
                        params: params
                    }).then((res) => {
                        const nodes = res.data.rows.map(item => ({
                            value: item.areaCode,
                            label: item.areaName,
                        }));
                        // 通过调用resolve将子节点数据返回，通知组件数据加载完成
                        resolve(nodes);
                    })
                }
            }
        })
    },
    methods: {
        //查询
        queryDataHandle(page = 1, row = 10){
            if (this.queryData.data != null) {
                this.uptime = this.queryData.data[0]
                this.downtime = this.queryData.data[1]
            }
            let payload = {
                pageNum: page,
                pageSize: row,
                name: this.queryData.name,
                activityInstanceStatus: this.queryData.activityInstanceStatus,
                startTime: this.uptime,
                endTime: this.downtime,
                empId: this.queryData.empId
            }
            let that = this
            //查询列表
            that.$request("/api/wheel/getOffline/1_0", payload, "POST").then((data) => {
                that.pagePagination['total'] = data.total
                that.pagePagination['pageSize'] = data.row
                that.tableData = data.rows
            })

            //员工
            let emp = {
                empId: ''
            }
            this.$request("/api/emp/getEmpList/1_0", emp, "POST").then((data) => {
                that.emp = data.rows
            })

        },

        publish(row) {
            let that = this
            this.$request("/api/wheel/publish/1_0", row, "POST").then((data) => {
                let result = data.message

                if ("活动尚未开始" == result || "活动已经结束" == result || "不可重复发布" == result) {
                    that.$message({
                        message: result,
                        type: 'info'
                    });
                    return;
                }
                that.$message({
                    message: result,
                    type: 'success'
                });
                that.queryDataHandle(that.pagePagination.currentPage, that.pagePagination.pageSize);
            })
        },

        tui(row) {
            this.table = row
            this.tuiguang = true
        },
        xiazai(url) {
            this.$requestFile("/api/wheel/downloadFile/1_0", {accessoriesAddress:url}, "线下活动.gif")
        },
        fuzhi(data) {
            let url = data;
            let oInput = document.createElement('input');
            oInput.value = url;
            document.body.appendChild(oInput);
            oInput.select(); // 选择对象;
            document.execCommand("Copy"); // 执行浏览器复制命令
            this.$message({
                message: '复制成功！',
                type: 'success'
            });
            oInput.remove()
        },
        //重置
        resetQuery() {
            this.queryData = {

            }
            this.queryDataHandle(1,10)
        },
        //新建活码跳转
        currentHandler(type) {
            this.currentPanel = type
            this.queryDataHandle(1,10)
        },
        // 分页插件事件
        callFather(parm) {
            this.formInline.page = parm.currentPage
            this.formInline.limit = parm.pageSize
            this.getdata(this.formInline)
        },
        download() {
            if (this.queryData.data != null) {
                this.uptime = this.queryData.data[0]
                this.downtime = this.queryData.data[1]
            }
            var activityInstance = {
                name: this.queryData.name,
                activityInstanceStatus: this.queryData.activityInstanceStatus,
                startTime: this.uptime,
                endTime: this.downtime,
                city: this.queryData.city,
                empId: this.queryData.empId
            }
            this.$requestFile("/api/wheel/download/1_0", activityInstance, "线下活动.xlsx")
        },
        tableRowChange(val) {
            if (val.length > 0) {
                this.titleCurrentPanel = true
            } else {
                this.titleCurrentPanel = false
            }
            this.multipleSelection = val;
        },
    }
}
</script>

<style scoped>

</style>
